<template>
    <BoxBorder13
        :colors="['#6586ec' ,'#2cf7fe']"
        class="bigDataCard"
    >
        <div class="header">
            <div class="title">各市警务区情况</div>
            <DeptList v-model="deptId" @change="changeDeptHandle"/>
        </div>
        <div class="body">
            <div class="statistics">
                <div class="statistics-item">
                    <span class="title">在职数量</span>
                    <span class="total total-01">{{ data.user }}</span>
                </div>
                <div class="statistics-item">
                    <span class="title">不规范数量</span>
                    <span class="total total-03">{{ data.xcMainCountHasProblem }}</span>
                </div>
                <div class="statistics-item">
                    <span class="title">巡查次数</span>
                    <span class="total total-04">{{ data.xcMainCount }}</span>
                </div>
                <div class="statistics-item">
                    <span class="title">接待来访</span>
                    <span class="total total-05">{{ data.checkIn }}</span>
                </div>
                <div class="statistics-item">
                    <span class="title">接入视频</span>
                    <span class="total total-06">{{ data.videoCount }}</span>
                </div>
                <div class="statistics-item">
                    <span class="title">办案数量</span>
                    <span class="total total-07">{{ data.jwApplyDetail }}</span>
                </div>
                <div class="statistics-item">
                    <span class="title">办案房间</span>
                    <span class="total total-08">{{ data.baseRoom }}</span>
                </div>
            </div>
        </div>
    </BoxBorder13>
</template>

<script setup>

import {BoxBorder13} from "guodu-data-panel";
import DeptList from "@/views/CenterController/components/DepList.vue";
import {getPoliceAreaInfo} from "@/api/CenterScreen/CenterScreen.js";

const deptId = ref(0)
const data = ref({})

let intervalId;
onMounted(() => {
    // 设置定时器，每10秒获取一次数据
    intervalId = setInterval(getData, 2 * 60 * 1000);
})

onUnmounted(() => {
    if (intervalId) {
        clearInterval(intervalId);
    }
})

const getData = async () => {
    const res = await getPoliceAreaInfo(deptId.value)
    data.value = res.data
}

const changeDeptHandle = async (id) => {
    await getData(id)
}
</script>

<style scoped lang="scss">
</style>